<template>
  <!-- 弹层 -->
  <el-dialog :model-value="modelValue" :title="title" :width="width" append-to-body @close="cancel">
    <template #header>
      <div class="text-[18px]">
        <slot name="header">{{ title }}</slot>
      </div>
    </template>
    <slot></slot>
    <template #footer>
      <div class="dialog-footer">
        <slot name="btn"></slot>
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" v-if="showSubmitFlag" @click="submitForm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="DescrptionFormItem">
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  width: {
    type: [Number, String],
    default: '1000px'
  },
  showSubmitFlag: {
    type: Boolean,
    default: true
  }
});

/** 取消按钮 */
const cancel = () => {
  emit('update:modelValue', false);
  emit('cancel');
};

const submitForm = () => {
  emit('submit');
};
const emit = defineEmits(['update:modelValue', 'handleSelectTable', 'submit', 'cancel']);
</script>
